<template>
    <div class="View">
        <div class="tabs">
            <div class="btn activeBtn">
                <el-button type="primary">仕様登録</el-button>
            </div>
        </div>

        <div class="content">
            <div class="row">
                <div class="label">
                    利用状況
                </div>
                <div style="border: 1px solid #DCDFE6; width: 380px;height: 32px;display: flex;align-items: center;">
                    <el-radio-group v-model="tableSelectRowClone.useCase">
                        <el-radio style="margin:0 15px 0 15px" v-for="(item, index) in listBox.useCaseLst" :key="index"
                            :label="item">{{ item }}</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="row">
                <div class="label">
                    ライン№
                </div>
                <el-input class="ipt orange" v-model="tableSelectRowClone.lineNo"
                    @input="tableSelectRowClone.lineNo = $setMaxLength(tableSelectRowClone.lineNo, 65)"></el-input>
            </div>

            <div class="row">
                <div class="label">
                    FROM
                </div>
                <el-input class="ipt" v-model="tableSelectRowClone.froms"
                    @input="tableSelectRowClone.froms = $setMaxLength(tableSelectRowClone.froms, 30)"></el-input>
            </div>
            <div class="row">
                <div class="label">
                    TO
                </div>
                <el-input class="ipt" v-model="tableSelectRowClone.tos"
                    @input="tableSelectRowClone.tos = $setMaxLength(tableSelectRowClone.tos, 30)"></el-input>
            </div>

            <div class="row">
                <div class="label">
                    C.L.番号
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.clNo">
                    <el-option v-for="item in listBox.clNoLst" :key="item.key" :label="item.label" :value="item.label">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    サイズ
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.siz">
                    <el-option v-for="(item, index) in listBox.sizLst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    Sch
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.sch">
                    <el-option v-for="(item, index) in listBox.schLst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    レーティング
                </div>
                <el-input class="ipt yellow" disabled v-model="tableSelectRowClone.rait"></el-input>
            </div>

            <div class="row">
                <div class="label">
                    ラインクラス
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.lCCodName"
                    @change="GetLineIndexTextLstFn(tableSelectRowClone.lCCodName)">
                    <el-option v-for="item in listBox.lineclsLst" :key="item.key" :label="item.label"
                        :value="item.label">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    材質分類
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.mate">
                    <el-option v-for="(item, index) in listBox.glossaryLst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    一般材質
                </div>
                <el-input class="ipt yellow" disabled v-model="tableSelectRowClone.adminCost"></el-input>
            </div>
            <div class="row">
                <div class="label">
                    流体名称
                </div>
                <el-input class="ipt" v-model="tableSelectRowClone.fluidName"
                    @input="tableSelectRowClone.fluidName = $setMaxLength(tableSelectRowClone.fluidName, 20)"></el-input>
            </div>
            <div class="row">
                <div class="label">
                    設計圧力
                </div>
                <el-input class="ipt" v-model="tableSelectRowClone.desPressure"
                    @input="changeDown('desPressure')"></el-input>
            </div>
            <div class="row">
                <div class="label">
                    設計温度
                </div>
                <el-input class="ipt" v-model="tableSelectRowClone.desTemperature"
                    @input="changeDown('desTemperature')"></el-input>
            </div>

            <div class="row">
                <div class="label">
                    運転圧力
                </div>
                <el-input class="ipt" v-model="tableSelectRowClone.runPressure"
                    :class="isEditData.isEdit ? 'orange' : ''" :disabled="!isEditData.isEdit"
                    @input="changeDown('runPressure')"></el-input>
            </div>
            <div class="row">
                <div class="label">
                    運転温度
                </div>
                <el-input class="ipt" v-model="tableSelectRowClone.runTemperature"
                    :class="isEditData.isEdit ? 'orange' : ''" :disabled="!isEditData.isEdit"
                    @input="changeDown('runTemperature')"></el-input>
            </div>
            <div class="row">
                <div class="label">
                    影響度
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.imCodName">
                    <el-option v-for="item in listBox.impLst" :key="item.key" :label="item.label" :value="item.label">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    主適用法規
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.law"
                    @change="GetLineIndexTextStyleFn(tableSelectRowClone.law)">
                    <el-option v-for="(item, index) in listBox.mainLawLst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    他適用法規１
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.law1">
                    <el-option v-for="(item, index) in listBox.mainLaw1Lst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    他適用法規２
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.law2">
                    <el-option v-for="(item, index) in listBox.mainLaw2Lst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    塗装
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.crCodName">
                    <el-option v-for="(item, index) in listBox.crtLst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    外装材
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.ouCodName">
                    <el-option v-for="(item, index) in listBox.outLst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>

            <div class="row">
                <div class="label">
                    熱処理
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.htCodName">
                    <el-option v-for="(item, index) in listBox.pwthLst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    SR実施済
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.srDtlData">
                    <el-option v-for="(item, index) in listBox.srLst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    スチームトレース
                </div>
                <el-select class="long-ipt" placeholder=" " v-model="tableSelectRowClone.stDtlData">
                    <el-option v-for="(item, index) in listBox.steamTraceLst" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
        </div>

        <footer class="footer-view">
            <!-- <button @click="clearFn(false)">{{ $t("message.planView.btn.clear") }}</button> -->
            <el-button type="primary" @click="saveFn(true)">編集内容を保存</el-button>
            <el-button type="warning" @click="close">
                {{ $t("message.public.close") }}
            </el-button>
        </footer>
    </div>
</template>

<script>
import $ from "jquery";

import { GetLineIndexCondCombox, UpdLineIndex, GetLineIndexTextLst, GetLineIndexTextStyle, addBasicStyleTipsMsg } from "@/api/api";
import { getLocalStorage } from "@/utils/storage"
import eventBus from "@/eventBus/bus";
import { showLoading, hideLoading } from "@/utils/loading";
import _ from 'lodash-es';
export default {
    name: "Dialog1",
    data() {
        return {
            listBox: [],
            negative: false,
            Data: {
                "c01": "",
                "c02": "",
                "c03": 1,
                "c04": 1,
                "c05": "",
                "c06": 1,
                "c07_FR": "",
                "c07_TO": "",
                "c08_FR": "",
                "c08_TO": "",
                "c09_FR": "",
                "c09_TO": "",
                "c10_FR": "",
                "c10_TO": "",
                "c09": 400
            },

            test: '',
            tableSelectRowClone: {},

            isEditData: {
                "isEdit": 0,
                "color": "#FBFCD0"
            },
        };
    },
    props: ["showRetrievalFlg1"],
    components: {},
    watch: {
        tableSelectRow: {
            handler(newName, oldName) {

            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        changeDown(key) {
            if (this.tableSelectRowClone[key].toString().startsWith('-')) {
                this.tableSelectRowClone[key] = `-${this.$setMyNum(this.tableSelectRowClone[key].replace(/-/, ''), '5 - 3')}`
            } else {
                this.tableSelectRowClone[key] = `${this.$setMyNum(this.tableSelectRowClone[key], '5 - 3')}`
            }
        },

        // 保存
        async saveFn(isSaveBtn = false, isRefresh = false) {
            console.log('312312312', isRefresh);

            let res = await addBasicStyleTipsMsg({});
            if (res.data.code == 451) {
                this.$confirm(res.data.data, '', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(async () => {
                    showLoading()
                    console.log(this.tableSelectRowClone);

                    let dataJson = {
                        Account: getLocalStorage('userName'),
                        // PltCode: this.$store.state.pltCode,
                        ...this.tableSelectRowClone
                    }
                    let res = await UpdLineIndex(dataJson);
                    if (!res) {
                        this.$emit('chenOldParams');
                        hideLoading();
                        return
                    }
                    hideLoading();

                    if (res.data.code != 0) {
                        this.$emit('chenOldParams');
                        this.$alert(res.data.msg, '', {
                            confirmButtonText: 'OK',
                            type: 'warning',
                        });

                        return
                    }
                    this.$message.success(res.data.msg);
                    if (isRefresh) {
                        this.$emit('GetLineIndexListApi', dataJson.lineNo);
                    }
                    setTimeout(() => {
                        if (isSaveBtn) {
                            this.$emit('GetLineIndexListApi', dataJson.lineNo);
                        } else {
                            this.$store.state.isCurrentFn()

                            this.$store.commit("reSetIsCurrent");
                        }
                    }, 500);
                    // this.close();
                }).catch(() => {
                    if (isRefresh) {
                        this.$store.state.isCurrentFn();
                        this.$store.commit("reSetIsCurrent");
                        return
                    }
                    if (isSaveBtn) {
                        return
                    }
                    this.$store.state.isCurrentFn();
                    this.$store.commit("reSetIsCurrent");
                });
            }


        },
        close() {
            this.$emit('showRetrievalBtn1', 'hidden')
        },

        // 获取下拉框的集合
        async GetLineIndexCondComboxApi(tableSelectRow) {
            this.tableSelectRow = _.cloneDeep(tableSelectRow);
            this.tableSelectRowClone = _.cloneDeep(tableSelectRow);
            console.log(this.tableSelectRowClone, '123');

            this.listBox = [];
            let dataJson = {
                PltCode: this.$store.state.pltCode || 9,//	是	int	装置Code
                Type: 2,
            }
            const res = await GetLineIndexCondCombox(dataJson);
            this.listBox = res.data.data;

            // this.GetLineIndexCondApi();  tableSelectRowClone.lCCodName
            this.GetLineIndexTextLstFn(this.tableSelectRowClone.lCCodName);
            this.GetLineIndexTextStyleFn(this.tableSelectRowClone.law);
        },
        // 获取黄色内容
        async GetLineIndexTextLstFn(LineclsLName) {
            let dataJson = {
                LineclsLName
            };
            let res = await GetLineIndexTextLst(dataJson);
            this.tableSelectRowClone.rait = res.data.data.raiting;
            this.tableSelectRowClone.adminCost = res.data.data.adminCost;
        },
        // 获取是否可编辑
        async GetLineIndexTextStyleFn(LawName) {
            let dataJson = {
                LawName
            };
            let res = await GetLineIndexTextStyle(dataJson);
            this.isEditData = res.data.data;
        }

    },
    created() {

    },
    mounted() {
        this.GetLineIndexCondComboxApi();

        eventBus.$on('getDialog1Current_EventBus', () => {
            // 获取当前数据是否更改。
            // console.log('getDialog1Current_EventBus', _.isEqual(this.tableSelectRowClone, this.tableSelectRow));
            if (!this.showRetrievalFlg1) {
                this.$store.commit("changeIsCurrentNext", true);
                return
            }

            this.$store.commit("changeIsCurrentNext", _.isEqual(this.tableSelectRowClone, this.tableSelectRow) && this.showRetrievalFlg1);
        });

        eventBus.$on('saveFnDialog1Current_EventBus', (isRefresh) => {
            // 获取当前数据是否更改。
            this.saveFn(false, isRefresh);
        })
    },
    beforeDestroy() {
        eventBus.$off('getDialog1Current_EventBus');
        eventBus.$off('saveFnDialog1Current_EventBus');
    },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
    .content {
        overflow: scroll;
    }

    .row {
        width: 100%;
        display: flex;
        // justify-content: start;
        margin-top: 12px;
        align-items: center;
        padding-left: 16px;

        .label {
            // width: 145px;
            min-width: 145px;
            height: 32px;
            display: flex;
            align-items: center;
        }

        .ipt {
            width: 380px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;

            }
        }

        .right {

            ::v-deep .el-input__inner {
                text-align: right;

            }
        }

        .long-ipt {
            width: 380px;
            height: 32px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }

        .short-ipt {
            width: 92px;
            height: 32px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }

        .picker {
            // width: 175px;
            height: 32px;
            // margin: 0px 10px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__suffix {
                background: transparent;
            }

            ::v-deep .el-input__icon {
                line-height: 100%;
            }
        }

    }
}

.tabs {
    display: flex;
    padding: 16px 16px 0 16px;
    // height: 64px;
    border-bottom: 1px solid #8e8e883b;

    .btn {
        width: 50% !important;
        // border: 1px solid #C3C3C3;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        // &:nth-child(2) {
        //     border-left: 0;
        //     border-right: 0;
        // }

        // span {
        //     margin-left: 8px;
        // }
        button {
            width: 100% !important;
            border-radius: 0;
        }
    }

    .activeBtn {
        button {
            background-color: #106EBE;
            color: #FFF;
        }
    }
}

.content {
    width: 100%;
    height: calc(100% - 110px);
    // background-color: red;
    margin-top: 25px;
    overflow-y: scroll;
    padding-bottom: 50px;
}

.footer-view {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 47px;
    padding: 0 15px;
    border-top: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    background: #ffffff;
    justify-content: space-between;

    button {
        min-width: 82px !important;
        height: 32px;

        // border: 1px solid #d9d9d9;
        margin-right: 12px;
        border-radius: 4px;
    }

    // button:nth-child(1) {
    //     background: #106ebe;
    //     color: #fff;
    //     padding: 0 15px;
    // }

    button:nth-child(2) {
        position: absolute;
        // background: #eb7421;
        // color: #fff;
        right: 0px;
    }
}

.yellow {
    ::v-deep .el-input__inner {
        background: #ffffe1 !important;
    }

    ::v-deep .el-textarea__inner {
        background: #ffffe1 !important;
    }
}

.orange {
    ::v-deep .el-input__inner {
        background-color: #FEDDB1;
    }
}
</style>
